<template>
  <div class="page-header-index-wide">

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <a-tab-pane loading="true" tab="资产情况" key="1">
            <a-row>
              <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="" :list="assetInfoList" />
              </a-col>
              <a-col :xl="18" :lg="12" :md="12" :sm="24" :xs="24">
                <ve-pie style="height: 350px;" :data="assetInfoPieData" />
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="receivables1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <a @click="setType(1)">今日</a>
              <a @click="setType(2)">本周</a>
              <a @click="setType(3)">本月</a>
              <a @click="setType(4)">本年</a>
            </div>
<!--            <a-range-picker-->
<!--              :style="{width: '256px'}"-->
<!--              format="YYYY-MM-DD"-->
<!--              @change="onDateChange"-->
<!--              :placeholder="['开始时间', '结束时间']" />-->
            <!--            :style="{width: '256px'}"-->
          </div>
          <a-tab-pane loading="true" tab="收费情况" key="receivables1">
            <a-row>
              <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="" :list="receivablesInfoList" />
              </a-col>
              <a-col :xl="18" :lg="12" :md="12" :sm="24" :xs="24">
                <ve-pie style="height: 350px;" :data="receivablesInfoPieData" />
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
  </div>
</template>

<script>

import RankList from '@/components/chart/RankList'
import VePie from 'v-charts/lib/pie.common.min'
// import VeHistogram from 'v-charts/lib/histogram.common.min'

import { getAction } from '@api/manage'

export default {
  name: 'IndexChart',
  components: {
    VePie,
    // VeHistogram,
    RankList
  },
  data () {
    return {
      loading: true,
      center: null,
      type: 3,
      startDate: '',
      endDate: '',
      assetInfoList: [],
      assetInfoPieData: {
        columns: ['name', 'total'],
        rows: []
      },
      receivablesInfoList: [],
      receivablesInfoPieData: {
        columns: ['name', 'total'],
        rows: []
      }
    }
  },
  created () {
    this.loading = false
    this.getAssetInfo()
    this.getReceivablesInfo()
  },
  methods: {
    getAssetInfo () {
      let that = this
      that.assetInfoList = []
      that.assetInfoPieData.rows = []
      getAction('index/getAssetInfoStatus').then(res => {
        if (res.success) {
          console.log('aaaaaa', res.result)
          that.assetInfoPieData.rows = JSON.parse(JSON.stringify(res.result))
          let te = that.$options.filters['NumberFormat'];
          for (let i = 0; i < res.result.length; i++) {
            res.result[i].total = te(res.result[i].total)
          }
          that.assetInfoList = res.result
        }
      })
    },
    getReceivablesInfo () {
      let that = this
      that.receivablesInfoList = []
      that.receivablesInfoPieData.rows = []
      getAction('index/getReceivablesInfoPayStatus',
        {
          type: that.type,
          startDate: that.startDate,
          endDate: that.endDate
        }
      ).then(res => {
        if (res.success) {
          console.log('bbbbb', res.result)
          let te = that.$options.filters['money'];
          that.receivablesInfoPieData.rows = JSON.parse(JSON.stringify(res.result))
          let t = 0
          for (let i = 0; i < res.result.length; i++) {
            let receivablesInfo = res.result[i]
            t = t + parseFloat(receivablesInfo.total)
            receivablesInfo.total = te(receivablesInfo.total)
            that.receivablesInfoList.push(receivablesInfo)
          }
          let aa = {
            name: '应收',
            total: te(t)
          }
          that.receivablesInfoList.push(aa)
        }
      })
    },
    setType (val) {
      this.type = val
      this.getReceivablesInfo()
    },

    onDateChange: function (value, dateString) {
      // console.log(dateString)
      this.startDate = dateString[0]
      this.endDate = dateString[1]
      this.setType(5)
    }
  }
}
</script>

<style lang="less" scoped>
.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}

.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, .45);
    display: inline-block;
    font-size: .95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }

  p {
    line-height: 42px;
    margin: 0;

    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}
</style>